
			   Panorama 2 Design Guide

The overall magazine design strongly relies upon the background graphics.

Each image can be either a JPEG, or a Windows BMP. Valid depths for BMPs
are 1-bit, 4-bit, 8-bit and 24-bit.

If an image contains transparent areas, these areas must be black on
the image. What's more, there must be a mask for this image. A mask
is typically a 1-bit BMP image with extension .msk. Areas that indicate
transparency must be white (opposite to the image) and opaque areas
must be black.

The background image should have dimensions equal to the screen resolution,
for example 640x480 or 800x600.

On the background there are some significant places:
 - page, i.e. article window, in which article contents are displayed,
 - scrollbar,
 - titlebar,
 - statusbar.
Optionally there can also exist the following "objects":
 - clock,
 - buttons,
 - static animated images.

Page (article window) should be wide enough to display articles.

Scrollbar can be either horizontal or vertical, but the readers usually
prefer a vertical scrollbar. One should prepare three images for the
scrollbar. Two of them would be displayed in the beginning and in the
end, and would always retain their original dimensions. The third, middle
image, would be stretched to fit the needs, i.e. to show how long an
article really is. The middle image is stretched horizontally or vertically,
depending on the scrollbar orientation. All three images are in fact
optional, and the scrollbar thumb will behave according to which of them
are supplied; begin and end image always have fixed dimensions, middle
image is always stretched.

Titlebar can either be a single vertical bar for displaying text, or it
can consist of two visually separated parts. In the other case the two
parts must be vertically aligned (must have the same Y-position).

Statusbar is a periodically used window for displaying text. It shouldn't
be too narrow.

Clock is a small rectangular area, and serves for displaying digital clock.

Buttons are very specific objects. Each button has three states: normal
(when mouse cursor is off it), selected (when cursor is on it) and
pressed (when the cursor is on and the left mouse button is pressed).
Each of the states can have an image assigned. If the normal state has
no image, nothing is displayed - in this case the normal state of the
button can be drawn on the background image. Each image used for each
state can be animated (see below). The button images shouldn't be
transparent for speed reasons.

Note: some states can be not animated, for example: if only the normal
state is animated, the animation stops when the user selects the button.
This behavior can be reversed: the image animation may start if the
user selects the button.

Buttons serve multiple purposes. The most common actions performed by
buttons are: exit, help, music selection, back (goto previous article),
stop the music. The pictography of the images should clearly show
the purposes of the buttons.

Buttons can be used in creation of complex menus. In this case the buttons
can cover a wide area of a special background image. The page should be
then a small rectangle for displaying links - it would allow navigating
with keyboard, as buttons can only be accessed with mouse. The actions
of the buttons should also be indicated by their appearance (for example
coding corner button would look different than music corner button).

Animated images can be used for buttons and cursors. An animated image is
a sequence of images. The sequence is recorded in a special text file with
extension ANI. Each line in this file describes a frame. First goes the
number of periods for which the frame is displayed (each period has 50ms)
and then goes the filename (can include spaces). An example ANI file
would consist of:

1 frame1.bmp
2 frame 2.jpg
1 frame3.bmp

A background "theme" should also have a set of mouse cursors related to
it. Cursor images are typically small - each dimension should be max.
64 pixels, i.e. the dimensions range from 1x1 to 64x64 and do no have
to be rectangular. Each cursor should have a corresponding transparency
mask. The following cursors can exist:
 - normal, typically an arrow,
 - scrollup, typically an open hand, used upon the scrollbar,
 - scrolldown (optional), typically a closed hand, used when dragging
   the scrollbar thumb,
 - linkup, typically a hand with a pointing finger, used upon links,
 - linkdown (optional), used when left mouse button is pressed over a link,
 - buttonup (optional), used upon a button (selected state),
 - buttondown (optional), used when left clicking a button (pressed state),
 - back (optional), used when holding right mouse button,
 - busy, used when loading an article,
 - four arrows: up, down, left and right, used when the mouse cursor
   reaches a corresponding edge of the screen - indicate auto-scrolling.
The optional cursors have been marked. All other cursor should exist
(though this is not obligatory). The cursors may change when the background
changes. The "back" cursor is not animated.

An issue of a magazine can have multiple background images. Single
articles can be viewed with several different backgrounds. The backgrounds
can change with the sections of the magazine. The section backgrounds
can differ between by only a logo (not necessarily animated), for example.
If only a part of a background image changes, there can be used an overlay
image (optionally semi-transparent) which will cover part of the background
image.

OK. Now the rest relies upon your invention.

If you have any doubts, mail me: chris@dragan.name

Chris Dragan
